<template>
  <div style="width: 100%">
    <a-card
      class="eip-admin-card-small eip-admin-card-small-bottom-border"
      :bordered="false"
    >
      <eip-search
        :option="table.search.option"
        @search="tableSearch"
      ></eip-search>
    </a-card>

    <a-card class="eip-admin-card-small" :bordered="false">
      <vxe-toolbar
        ref="toolbar"
        custom
        print
        export
        :refresh="{ query: tableInit }"
      >
        <template v-slot:buttons>
          <eip-toolbar
            @del="del"
            @update="update"
            @add="add"
            @designer="designerConfig"
            @onload="toolbarOnload"
          ></eip-toolbar>
          <a-space v-if="tableId">
            <template v-for="(button, index) in buttons">
              <a-button
                :type="button.style"
                :key="index"
                @click="click(button.method)"
              >
                <a-icon :type="button.icon" :theme="button.theme" />
                {{ button.name }}</a-button
              >
            </template>
          </a-space>
        </template>
      </vxe-toolbar>
      <vxe-table
        :loading="table.loading"
        id="formlist"
        ref="table"
        :seq-config="{
          startIndex: (table.page.param.current - 1) * table.page.param.size,
        }"
        :height="table.height"
        :export-config="{}"
        :print-config="{}"
        :data="table.data"
        :tooltip-config="tooltipConfig"
      >
        <template #loading>
          <a-spin></a-spin>
        </template>

        <template #empty>
          <eip-empty />
        </template>
        <vxe-column type="checkbox" width="40" align="center" fixed="left">
          <template #header="{ checked, indeterminate }">
            <span @click.stop="$refs.table.toggleAllCheckboxRow()">
              <a-checkbox :indeterminate="indeterminate" :checked="checked">
              </a-checkbox>
            </span>
          </template>

          <template #checkbox="{ row, checked, indeterminate }">
            <span @click.stop="$refs.table.toggleCheckboxRow(row)">
              <a-checkbox :indeterminate="indeterminate" :checked="checked">
              </a-checkbox>
            </span>
          </template>
        </vxe-column>
        <vxe-column type="seq" title="序号" width="60"></vxe-column>

        <vxe-column
          field="name"
          title="名称"
          width="250"
          showOverflow="ellipsis"
        ></vxe-column>
        <vxe-column field="isFreeze" title="禁用" align="center" width="80">
          <template v-slot="{ row }">
            <a-switch :checked="row.isFreeze" @change="isFreezeChange(row)" />
          </template>
        </vxe-column>
        <vxe-column field="useType" title="触发类型" align="center" width="160">
          <template v-slot="{ row }">
            <a-tag color="#2db7f5" v-if="row.configType == 1"
              >工作表新增或变更</a-tag
            >
            <a-tag color="#f50" v-if="row.configType == 2">时间周期循环</a-tag>
            <a-tag color="#f50" v-if="row.configType == 3">指定日期字段</a-tag>
            <a-tag color="#f90" v-if="row.configType == 4">按钮</a-tag>
          </template>
        </vxe-column>
        <vxe-column
          v-if="!tableId"
          field="tableName"
          title="工作表"
          width="180"
        ></vxe-column>
        <vxe-column
          field="orderNo"
          title="排序"
          align="center"
          width="60"
        ></vxe-column>
        <vxe-column
          field="remark"
          title="备注"
          min-width="150"
          showOverflow="ellipsis"
        ></vxe-column>
        <vxe-column
          field="createUserName"
          title="创建人"
          width="100"
        ></vxe-column>
        <vxe-column
          field="createTime"
          title="创建时间"
          width="160"
        ></vxe-column>
        <vxe-column
          field="updateUserName"
          title="修改人"
          width="100"
        ></vxe-column>
        <vxe-column
          field="updateTime"
          title="修改时间"
          width="160"
        ></vxe-column>
        <vxe-column field="configId" title="记录ID" width="330">
          <template v-slot="{ row }">
            <a-tooltip>
              <template slot="title"> 点击复制 </template>
              <a-icon
                class="configIdCopy"
                @click="configIdCopy(row.configId)"
                type="copy"
              ></a-icon>
            </a-tooltip>
            <label>{{ row.configId }}</label>
          </template>
        </vxe-column>
        <vxe-column title="操作" align="center" fixed="right" width="160px">
          <template #default="{ row }">
            <a-tooltip
              @click="tableUpdateRow(row)"
              title="编辑"
              v-if="visible.update"
            >
              <label class="text-eip eip-cursor-pointer">编辑</label>
            </a-tooltip>
            <a-divider type="vertical" v-if="visible.del" />
            <a-tooltip
              title="删除"
              v-if="visible.del"
              @click="tableDelRow(row)"
            >
              <label class="text-red eip-cursor-pointer">删除</label>
            </a-tooltip>
            <a-divider type="vertical" v-if="visible.designer" />
            <a-tooltip
              title="设计"
              v-if="visible.designer"
              @click="tableDesignerRow(row)"
            >
              <label class="text-eip eip-cursor-pointer">设计</label>
            </a-tooltip>
          </template>
        </vxe-column>
      </vxe-table>
      <a-pagination
        class="padding-top-sm float-right"
        v-model="table.page.param.current"
        show-size-changer
        show-quick-jumper
        :page-size-options="table.page.sizeOptions"
        :show-total="(total) => `共 ${total} 条`"
        :page-size="table.page.param.size"
        :total="table.page.total"
        @change="tableInit"
        @showSizeChange="tableSizeChange"
      ></a-pagination>
    </a-card>
    <edit
      ref="edit"
      v-if="edit.visible"
      :visible.sync="edit.visible"
      :data="edit.data"
      :title="edit.title"
      :tableId="tableId"
      :configId="edit.configId"
      @ok="operateStatus"
    ></edit>

    <designer
      ref="designer"
      v-if="designer.visible"
      :visible.sync="designer.visible"
      :title="designer.title"
      :tableId="tableId"
      :configId="designer.configId"
      @close="designerClose"
    ></designer>
  </div>
</template>

<script>
import { VxeUI } from "vxe-pc-ui";
import {
  query,
  del,
  isFreeze,
} from "@/services/system/zerocode/automation/list";
import edit from "./edit";
import designer from "./designer";

import { selectTableRow, deleteConfirm } from "@/utils/util";
export default {
  data() {
    return {
      buttons: [],
      tooltipConfig: {
        showAll: true,
        enterable: true,
        contentMethod: ({ type, column, row, items, _columnIndex }) => {
          const { field, title } = column;
          if (title == "操作" || field === "configId") {
            return "";
          }
          return null;
        },
      },
      table: {
        page: {
          param: {
            current: 1,
            size: this.eipPage.size,
            sord: "asc",
            sidx: "",
            filters: "",
            tableId: this.tableId,
          },
          total: 0,
          sizeOptions: this.eipPage.sizeOptions,
        },

        loading: true,
        data: [],
        height: this.eipTableHeight() - 162 + "px",
        search: {
          option: {
            num: 6,
            config: [
              {
                field: "Name",
                op: "cn",
                placeholder: "请输入名称",
                title: "名称",
                value: "",
                type: "text",
              },
              {
                field: "configType",
                op: "eq",
                title: "触发类型",
                placeholder: "请选择触发类型",
                type: "select",
                options: {
                  multiple: true, //多选
                  source: {
                    type: "custom",
                    format: [
                      { key: "1", value: "工作表新增或变更" },
                      { key: "2", value: "时间周期循环" },
                      { key: "3", value: "指定日期字段" },
                    ],
                  },
                },
              },
              {
                field: "remark",
                op: "cn",
                placeholder: "请输入备注",
                title: "备注",
                value: "",
                type: "text",
              },
            ],
          },
        },
      },
      visible: {
        update: true,
        del: true,
        designer: true,
      },

      edit: {
        visible: false,
        configId: "",
        title: "",
        data: [],
      },

      designer: {
        visible: false,
        configId: "",
        title: "",
        bodyStyle: {
          padding: "0",
        },
      },
    };
  },
  props: {
    tableId: {
      type: String,
    },
  },
  components: { edit, designer },
  created() {
    this.tableInit();
  },
  mounted() {
    this.$refs.table.connect(this.$refs.toolbar);
  },
  methods: {
    /**
     * 点击触发
     */
    click(method) {
      switch (method) {
        case "del":
          this.del();
          break;
        case "update":
          this.update();
          break;
        case "add":
          this.add();
          break;
        case "designer":
          this.designerConfig();
          break;
      }
    },
    /**
     *
     */
    configIdCopy(text) {
      if (VxeUI.clipboard.copy(text)) {
        this.$message.success("复制成功");
      } else {
        this.$message.error("复制失败");
      }
    },

    /**
     *
     */
    isFreezeChange(row) {
      if (this.visible.update) {
        let that = this;
        this.$message.loading("保存中...", 0);
        isFreeze({ id: row.configId }).then((result) => {
          that.$message.destroy();
          if (result.code == that.eipResultCode.success) {
            that.reload(false);
            that.$message.success(result.msg);
          } else {
            that.$message.error(result.msg);
          }
        });
      }
    },

    /**
     * 列表查询
     */
    tableSearch(filters) {
      this.table.page.param.current = 1;
      this.table.page.param.filters = filters;
      this.tableInit();
    },

    /**
     * 初始化列表数据
     */
    tableInit() {
      let that = this;
      that.table.loading = true;
      query(that.table.page.param).then(function (result) {
        if (result.code == that.eipResultCode.success) {
          that.table.data = result.data;
          that.table.page.total = result.total;
        }
        that.table.loading = false;
      });

      if (this.tableId) {
        this.buttons = [
          {
            menuButtonId: "490112bb-b991-4f82-a6cb-b10b0171a228",
            name: "新增",
            triggerType: 1,
            method: "add",
            script: "",
            api: null,
            icon: "plus",
            theme: "outlined",
            orderNo: 1,
            style: "primary",
            isShowTable: true,
          },
          {
            menuButtonId: "e465960c-0025-485a-a9e6-b10b0171ac6f",
            name: "编辑",
            triggerType: 1,
            method: "update",
            script: "",
            api: null,
            icon: "edit",
            theme: "outlined",
            orderNo: 3,
            style: "primary",
            isShowTable: true,
          },
          {
            menuButtonId: "b2794f8a-be98-4a46-9e27-b10b0171b502",
            name: "批量删除",
            triggerType: 1,
            method: "del",
            script: "",
            api: null,
            icon: "delete",
            theme: "outlined",
            orderNo: 4,
            style: "danger",
            isShowTable: true,
          },
          {
            menuButtonId: "bc425c62-f866-4c51-9210-b10b0171bdfd",
            name: "设计",
            triggerType: 1,
            method: "designer",
            script: null,
            api: null,
            icon: "border-outer",
            theme: "outlined",
            orderNo: 4,
            style: "primary",
            isShowTable: true,
          },
        ];

        this.visible.designer =
          this.buttons.filter((f) => f.method == "designer").length > 0;
        this.visible.update =
          this.buttons.filter((f) => f.method == "update").length > 0;
        this.visible.del =
          this.buttons.filter((f) => f.method == "del").length > 0;
      }
    },
    /**
     *数量改变
     */
    tableSizeChange(current, pageSize) {
      this.table.page.param.size = pageSize;
      this.tableInit();
    },

    /**
     * 更新
     */
    tableUpdateRow(row) {
      this.edit.title = "编辑表单-" + row.name;
      this.edit.visible = true;
      this.edit.configId = row.configId;
    },
    /**
     * 删除
     */
    tableDelRow(row) {
      let that = this;
      deleteConfirm(
        "编辑表单" + row.name + "】" + that.eipMsg.delete,
        function () {
          that.$loading.show({ text: that.eipMsg.delloading });
          del({ id: row.configId }).then((result) => {
            if (result.code == that.eipResultCode.success) {
              that.reload();
            }
            that.$loading.hide();
            that.$message.success(result.msg);
          });
        },
        that
      );
    },

    /**
     * 设计
     */
    tableDesignerRow(row) {
      let that = this;
      that.designer.title = row.name;
      that.designer.visible = true;
      that.designer.configId = row.configId;
    },

    /**
     * 新增
     */
    add() {
      this.edit.configId = null;
      this.edit.title = "新增自动化";
      this.edit.visible = true;
    },

    /**
     * 修改
     */
    update() {
      let that = this;
      selectTableRow(
        that.$refs.table,
        function (row) {
          that.edit.title = "编辑表单-" + row.name;
          that.edit.configId = row.configId;
          that.edit.visible = true;
        },
        that
      );
    },

    /**
     * 删除
     */
    del() {
      let that = this;
      selectTableRow(
        that.$refs.table,
        function (rows) {
          //提示是否删除
          deleteConfirm(
            that.eipMsg.delete,
            function () {
              //加载提示
              that.$loading.show({ text: that.eipMsg.delloading });
              let ids = that.$utils.map(rows, (item) => item.configId);
              del({ id: ids.join(",") }).then((result) => {
                that.$loading.hide();
                if (result.code == that.eipResultCode.success) {
                  that.reload();
                  that.$message.success(result.msg);
                } else {
                  that.$message.error(result.msg);
                }
              });
            },
            that
          );
        },
        that,
        false
      );
    },
    /**
     * 设计
     */
    designerConfig() {
      let that = this;
      selectTableRow(
        that.$refs.table,
        function (row) {
          that.designer.title = row.name;
          that.designer.visible = true;
          that.designer.configId = row.configId;
        },
        that
      );
    },

    /**
     * 编辑关闭
     */
    designerCancel() {
      this.designer.visible = false;
    },

    //提示状态信息
    operateStatus(result) {
      if (result.code === this.eipResultCode.success) {
        this.reload();
      }
    },

    /**
     * 重新加载
     */
    reload() {
      this.table.page.param.current = 1;
      this.tableInit();
    },

    /**
     * 权限按钮加载完毕
     */
    toolbarOnload(buttons) {
      if (!this.tableId) {
        this.visible.designer =
          buttons.filter((f) => f.method == "designer").length > 0;
        this.visible.update =
          buttons.filter((f) => f.method == "update").length > 0;
        this.visible.del = buttons.filter((f) => f.method == "del").length > 0;
      }
    },

    /**
     *
     */
    designerClose() {
      this.designer.visible = false;
    },
  },
};
</script>
